<template>
  <div class="overlappingList">
    <div class="trendoverlappingList">
      <div class="trendListName">
        <div v-for="(item, index) in fields" :key="index">
          <div :class="item.name ? 'overlappingListHeader' : ''">
            <div @click="handleSortToggle(item)">{{ item.name }}</div>

            <div class="sortTble" v-if="item.type === 1">
              <div class="filterTbleItem">
                <div
                  :class="item.sortUp ? 'triangleUp' : 'triangleUpDefalt'"
                  @click="handleTrendItemHistoryUp(item)"
                ></div>
                <div
                  :class="item.sortDown ? 'triangleDown' : 'triangleDownDefalt'"
                  @click="handleTrendItemHistoryDown(item)"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div v-for="(item, index) in afterData" :key="index" class="trendListItem">
        <div class="trendItemName">{{ item.orgBranchName }}</div>
        <div class="trendSonIten_container">
          <div v-for="(code, index) in item.list" :key="index" @click="handleFilters(code)">
            <div v-for="(fieldCode, index) in contentCode" :key="index" class="trendSonItem">
              <div :class="code[contentCode[index + 1]] < 0 ? 'trendItemrate trendSonItemColor' : 'trendItemrate'">
                {{ code[contentCode[index + 1]] }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['fields', 'dataContent', 'indexData'],
  data() {
    return {
      trendItem: {},
      contentCode: [], // 拿到code集合
      contentRefCode: [], // 拿到refCode集合
      tempArr: [],
      afterData: [],
      filedsData: [],
      newFildsData: []
      // filterData: []
    }
  },
  mounted() {
    // this.afterData = this.dataContent
    // this.contentCode = ['orgBranchName', 'orgBranchvalue']
    // this.filedsData = this.fields
  },
  methods: {
    handleTrendItemHistoryUp(item) {
      this.newFildsData.filter(child => {
        if (child.code === item.code) {
          child.sortUp = true
          child.sortDown = false
        } else {
          child.sortUp = false
          child.sortDown = false
        }
      })
      // this.actionTableList = this.actionTableList.sort((a, b) => a.trendItemHistory - b.trendItemHistory)
    },
    handleTrendItemHistoryDown(item) {
      this.newFildsData.filter(child => {
        if (child.code === item.code) {
          child.sortDown = true
          child.sortUp = false
        } else {
          child.sortUp = false
          child.sortDown = false
        }
      })
      // this.actionTableList = this.actionTableList.sort((a, b) => b.trendItemHistory - a.trendItemHistory)
    },
    // trendClick(item) {
    // },
    handleSortToggle(item) {
      this.newFildsData.map(child => {
        if (child.code === item.code) {
          if (child.sortUp === false && child.sortDown === false) {
            child.sortUp = true
          } else {
            child.sortUp = !child.sortUp
            child.sortDown = !child.sortDown
          }
        } else {
          child.sortUp = false
          child.sortDown = false
        }
      })
    },
    initData() {
      for (let i = 0; i < this.fields.length; i++) {
        this.contentCode.push(this.fields[i].code)
        if (this.fields[i].role === 'dim') {
          this.contentRefCode.push(this.fields[i].refCode)
        }
      }
      for (let n = 0; n < this.dataContent.length; n++) {
        if (this.tempArr.indexOf(this.dataContent[n].[this.contentCode[0]]) === -1) {
          this.afterData.push({
            orgBranchName: this.dataContent[n].[this.contentCode[0]],
            list: [this.dataContent[n]]
          })
          this.tempArr.push(this.dataContent[n].[this.contentCode[0]])
        } else {
          for (let j = 0; j < this.afterData.length; j++) {
            if (this.afterData[j].orgBranchName === this.dataContent[n].[this.contentCode[0]]) {
              this.afterData[j].list.push(this.dataContent[n])
            }
          }
        }
      }
    },
    handleFilters(item) {
      this.trendItem = item
      this.$emit('getTrendList', true, item, this.contentRefCode)
    }
  },
  watch: {
    'dataContent'(val) {
      this.contentCode = []
      this.afterData = []
      this.tempArr = []
      this.initData()
    }
    // 'filedsData'(val) {
    //   this.newFildsData = [{name: '张三',type:1,code:'orgname',sortUp:false,sortDown:false},{name:'王五',type:2,code:'wanName',sortUp:false,sortDown:false},{name:'李四',type:1,code:'liname',sortUp:false,sortDown:false}]
    // }
  }
}
</script>

<style lang="scss" scoped>
.overlappingList {
  .trendoverlappingList {
    .trendListName {
      display: flex;
      justify-content: space-between;
      padding-bottom: 11px;
      .overlappingListHeader {
        font-size: 16px;
        color: #878bae;
        display: flex;
      }
      .sortTble {
        display: flex;
        .filterTbleItem {
          width: 18px;
          height: 18px;
          padding-left: 4px;
          padding-top: 3px;
        }
        .triangleUpDefalt {
          width: 10px;
          border-left: 6px solid transparent;
          border-right: 6px solid transparent;
          border-bottom: 6px solid rgba(255, 255, 255, 0.32);
          margin-bottom: 2px;
        }
        .triangleUp {
          width: 10px;
          border-left: 6px solid transparent;
          border-right: 6px solid transparent;
          border-bottom: 6px solid rgba(255, 255, 255, 1);
          margin-bottom: 2px;
        }
        .triangleDownDefalt {
          width: 10px;
          border-left: 6px solid transparent;
          border-right: 6px solid transparent;
          border-top: 6px solid rgba(255, 255, 255, 0.32);
        }
        .triangleDown {
          width: 10px;
          border-left: 6px solid transparent;
          border-right: 6px solid transparent;
          border-top: 6px solid rgba(255, 255, 255, 1);
        }
      }
    }
    .trendListItem {
      display: flex;
      justify-content: space-between;
      border-top: 1px dashed rgba(208, 213, 255, 0.3);
      padding: 19px 0px 9px 0px;
      .trendItemName {
        font-size: 14px;
        width: 80px;
        color: #d6ddff;
        background: none;
        text-align: center;
        margin: auto 0px;
        padding-right: 37px;
      }
      .trendSonIten_container {
        .trendSonItem {
          .trendItemrate {
            font-size: 16px;
            font-weight: 400;
            text-align: right;
            padding-bottom: 10px;
            color: rgba(255, 255, 255, 0.64);
          }
          .trendSonItemColor {
            color: #ffb440;
          }
        }
      }
    }
  }
}
</style>
